<template>
    <div class="view">
        <div class="search-view">
            <div class="seach-filter">
				<XSearchFilterModule 
					:data="item" :scales="scales" :status="searchData.date" :index="index" :isReserve="isReserve"
					v-for="(item,index) in searchFilterData"
					:key="index"
					ref="search"
					style="color:#fff;"
					@on-search="clickSearch">
				</XSearchFilterModule>
				<div class="search-filter-view">
					<span style="color: #fff;">选择日期：</span>
					<DatePicker 
						type="date" 
						:value="searchData.date"
						format="yyyy-MM-dd"
						:options="options"
						style="width: 3rem"
						@on-change="changeDate">
					</DatePicker>
				</div>
			</div>
            <div class="btn-view">
                <Button type="primary">刷新</Button>
            </div>
        </div>
        <div class="list-view">
            <XListView 
                :data="movieReserveData"
                @on-action="clickReserve">
            </XListView>
        </div>
        <!-- 新建预定 -->
        <div v-if="reserveData.isShow">
            <XActionReserveModel
                :data="reserveData"
                @on-submit="submitReserve">
            </XActionReserveModel>
        </div>
    </div>
</template>

<script>
import $ from 'jquery'
import XListView from '@/pages/reserve/view/XListView'
import XActionReserveModel from '@/pages/reserve/view/XActionReserveModel'
import XSearchFilterModule from '@/components/XSearchFilterModule' //筛选

import reserveService from '@/network/service/reserveService.js'
import roomService from '@/network/service/roomService.js'
    export default {
        components: {XSearchFilterModule, XListView, XActionReserveModel},
        data() {
            return {
                scales: ['', ''],
                status: '',
                searchFilterData: [],
                isReserve: true,
                searchData: {
                    date: ''
                },
                options: {
                    disabledDate (date) {
                        return date && date.valueOf() < Date.now() - 86400000;
                    }
                },
                movieReserveData: {
                    listType: 'reserve',
                    data: [],
                    page: {
                        currentPage: 0,
                        pageSize: 20,
                        key:'',
                        totalSize: 0
                    }
                },
                reserveData: {
                    isShow: false,
                    isLoading: false,
                    data: {
                        name: null,
                        phoneNum: null,
                        number: 0,
                        startTime: null,
                        hours: 0,
                        bookType: null,
                        moive: null,
                        mins: null,
                        roomId: null,
                        source: null,
                        isMember: null,
                        memberId: null,
                    }
                }
            }
        },
        mounted() {
            let input = $('.ivu-input');
            let table = $('.ivu-table');
            let selects = $('.ivu-select');
            let select = $('.ivu-page-options-elevator input');
            for(let i = 0; i < input.length; i++) {
                input[i].style.color = 'rgba(255, 255, 255, 0.6)'
            }
            for(let i = 0; i < table.length; i++) {
                table[i].style.color = 'rgba(255, 255, 255, 0.6)'
            }
            for(let i = 0; i < select.length; i++) {
                select[i].style.color = 'rgba(255, 255, 255, 0.6)'
            }
            for(let i = 0; i < selects.length; i++) {
                selects[i].style.color = 'rgba(255, 255, 255, 0.6)'
            }
            this.formatNowTime();
            this.getDimensions();
            this.getRoomBookList();
        },
        methods: {
            clickSearch(formData, index) {
                this.scales[index] = formData.did
                for(let i = 0; i < this.$refs.search.length; i++) {
                    this.$refs.search[i].getReserveDimension();
                    this.getRoomBookList();
                }
            },
            changeDate(val) {
                this.searchData.date = val;
                this.getRoomBookList();
            },
            formatNowTime() {
                var date = new Date();
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                var D = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate());
                this.searchData.date = Y + M + D;
            },

            clickReserve(formData) {
                this.reserveData.isShow = true;
                this.reserveData.isLoading = false;
                this.reserveData.row = formData.row;
                this.reserveData.data = {
                    name: null,
                    phoneNum: null,
                    number: null,
                    startTime: null,
                    hours: null,
                    bookType: formData.row.type == 1? '1': '0',
                    moive: null,
                    mins: null,
                    roomId: null,
                    source: null,
                    isMember: null,
                    memberId: null,
                }
            },
            submitReserve(formData) {
                this.addBook(formData);
            },
            getDimensions () {
                roomService.getDimensions().then(res =>{
                    let result = res.data;
                    let code = result.rescode;
                    let resmsg = result.msg;
                    if (code == 100) {
                        this.searchFilterData = result.data;
                    } else {
                        this.$Message.error(resmsg);
                    }
                }, error => {
                    this.$Message.error('服务器异常，请稍后再试')
                })
            },
            getRoomBookList() {
                let params = {
                    scales: this.scales.join(','),
                    date: this.searchData.date,
                    roomId: ''
                }
                reserveService.getRoomBookList(params).then(res => {
                    let result = res.data;
                    let code = result.rescode;
                    let resmsg = result.msg;
                    if (code == 100) {
                        this.movieReserveData.data = result.data;
                        this.movieReserveData.page.totalSize = result.totalSize;
                    } else {
                        this.$Message.error(resmsg);
                    }
                }, error => {
                    this.$Message.error('服务器异常，请稍后再试');
                })
            },
            addBook(formData) {
                let params = {
                    name: formData.data.name,
                    phoneNum: formData.data.phoneNum,
                    number: formData.data.number,
                    startTime: formData.data.startTime,
                    hours: formData.data.hours,
                    bookType: formData.data.bookType,
                    moive: formData.data.moive,
                    mins: formData.data.mins,
                    roomId: formData.row.rid,
                    source: formData.data.source,
                    isMember: formData.data.isMember,
                    memberId: formData.data.memberId,
                }
                formData.isLoading = true;
                reserveService.addBook(params).then(res => {
                    let result = res.data;
                    let code = result.rescode;
                    let resmsg = result.msg;
                    if (code == 100) {
                        formData.isShow = false;
                        formData.isLoading = false;
                        this.getRoomBookList();
                    } else {
                        formData.isLoading = false;
                        this.$Message.error(resmsg);
                    }
                }, error => {
                    formData.isLoading = false;
                    this.$Message.error('服务器异常，请稍后再试');
                })
            }
        }
    }
</script>

<style scoped lang="less">
.view {
    width: 100%;
    height: 100%;
    padding: .2rem;
    .search-view {
        position: relative;
        margin-bottom: .2rem;
        .btn-view {
            position: absolute;
            right: 0;
            top: 0;
        }
    }
    .list-view {
        color: #ffffff;
    }
}
</style>